<template>
  <div class="rank_list">
    <div class="hotImges">
      <img src="../assets/images/hot_music_logo.png" alt />
      <span>{{ timeData }}</span>
    </div>
    <song
      v-for="(item,idx) in hotsong"
      :key="idx"
      :song_data="{
          name:item.name,
          ar:item.ar[0].name,
          al:item.al.name,
          id:hotsong,
          index:idx
        }"
      @play="play_music"
    ></song>
  </div>
</template>
<script>
import { top, topList } from "../api/rank_list";
import song from "../components/song";
export default {
  name: "Rank_list",
  components: {
    song
  },
  data() {
    return {
      hotsong: null,
      timeData: null
    };
  },
  async created() {
    let res = await top();
    this.hotsong = res.data.playlist.tracks.splice(0, 20);
    console.log(this.hotsong)
    let text = await topList();
    this.timeData = text.data.list[3].updateFrequency;
  },
  methods: {
    // 点击选中的歌名跳转页面并播放音乐
    play_music(name, song_data, index, ar) {
      // let res = await toPlaySong(id);
      console.log("播放音乐", name, song_data, index, ar);
      this.$router.push({
        name: "item",
        params: {
          name: name,
          id_list: song_data,
          index: index,
          ar: ar
        }
      });
    }
  }
};
</script>
<style lang="scss">
.rank_list {
  width: 100%;
  position: relative;
  .hotImges {
    width: 100%;
    height: 150px;
    background-image: url(../assets/images/hot_music_bg.jpg);
    img {
      width: 45%;
      position: absolute;
      left: 0;
    }
    span {
      position: absolute;
      top: 110px;
      left: 25px;
      color: #ffffff;
    }
  }
}
</style>